<template>
  <div id="webgl"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import * as THREE from "three";
import earth_img from "../assets/PerspectiveCamera.png";
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import Cesium_Air from "../assets/Cesium_Air.gltf";

// 创建3D场景对象Scene
const scene = new THREE.Scene();

/*
// 三维向量Vector3创建一组顶点坐标
// p1、p3轨迹线起始点坐标
const p1 = new THREE.Vector3(-100, 0, -100);
const p3 = new THREE.Vector3(100, 0, 100);
// 计算p1和p3的中点坐标
const x2 = (p1.x + p3.x) / 2;
const z2 = (p1.z + p3.z) / 2;
const h = 50;
const p2 = new THREE.Vector3(x2, h, z2);

const arr = [p1, p2, p3];
// 三维样条曲线
const curve = new THREE.CatmullRomCurve3(arr);

//曲线上获取点
const pointsArr = curve.getPoints(100);
const geometry = new THREE.BufferGeometry();
//读取坐标数据赋值给几何体顶点
geometry.setFromPoints(pointsArr);
// 线材质
const material = new THREE.LineBasicMaterial({
  color: 0x00fffff,
});
// 线模型
const line = new THREE.Line(geometry, material);
scene.add(line);
*/

/*
// p1、p2、p3表示三个点坐标
// p1、p3是曲线起始点，p2是曲线的控制点
// p1、p3轨迹线起始点坐标
const p1 = new THREE.Vector3(-100, 0, -100);
const p3 = new THREE.Vector3(100, 0, 100);
// 计算p1和p3的中点坐标
const x2 = (p1.x + p3.x) / 2;
const z2 = (p1.z + p3.z) / 2;
const h = 100;
const p2 = new THREE.Vector3(x2, h, z2);
// 三维二次贝赛尔曲线
const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);

const pointsArr = curve.getPoints(100); //曲线上获取点
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(pointsArr); //读取坐标数据赋值给几何体顶点
const material = new THREE.LineBasicMaterial({ color: 0x00fffff });
const line = new THREE.Line(geometry, material);
scene.add(line);
*/

const R = 80; //圆弧半径
const H = 200; //直线部分高度
// 直线1
const line1 = new THREE.LineCurve(
  new THREE.Vector2(R, H),
  new THREE.Vector2(R, 0)
);
// 圆弧
const arc = new THREE.ArcCurve(0, 0, R, 0, Math.PI, true);
// 直线2
const line2 = new THREE.LineCurve(
  new THREE.Vector2(-R, 0),
  new THREE.Vector2(-R, H)
);

// CurvePath创建一个组合曲线对象
const CurvePath = new THREE.CurvePath();
//line1, arc, line2拼接出来一个U型轮廓曲线，注意顺序
CurvePath.curves.push(line1, arc, line2);

const pointsArr = CurvePath.getPoints(100); //曲线上获取点
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(pointsArr); //读取坐标数据赋值给几何体顶点
const material = new THREE.LineBasicMaterial({ color: 0x00fffff });
const line = new THREE.Line(geometry, material);
scene.add(line);

// 定义threejs输出画布的尺寸(单位:像素px)
const width = window.innerWidth; //宽度
const height = window.innerHeight; //高度
// 实例化一个透视投影相机对象
const camera = new THREE.OrthographicCamera(
  -100 * (width / height),
  100 * (width / height),
  100,
  -100,
  1,
  3000
);
//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(0, 0, 100);
//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //指向mesh对应的位置

// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const pointLight = new THREE.PointLight(0xffffff, 1.0);
pointLight.decay = 0.0;
pointLight.position.set(0, 0, 3000);
scene.add(pointLight);
const pointLight2 = new THREE.PointLight(0xffffff, 1.0);
pointLight2.decay = 0.0;
pointLight2.position.set(3000, 0, 0);
scene.add(pointLight2);
const pointLight3 = new THREE.PointLight(0xffffff, 1.0);
pointLight3.decay = 0.0;
pointLight3.position.set(0, 0, -3000);
scene.add(pointLight3);
const pointLight4 = new THREE.PointLight(0xffffff, 1.0);
pointLight4.decay = 0.0;
pointLight4.position.set(-3000, 0, 0);
scene.add(pointLight4);

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.setClearColor(0xffffff, 1);
renderer.render(scene, camera);

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener("change", function () {
  renderer.render(scene, camera); //执行渲染操作
}); //监听鼠标、键盘事件

function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render);
}
render();

onMounted(() => {
  document.getElementById("webgl").appendChild(renderer.domElement);
});
</script>
